<template>
  <el-table :data="quest_options" border>
    <el-table-column prop="code" label="单选题" width="80" align="center" :reserve-selection="true">
      <template slot-scope="scope">
        <el-checkbox-group v-model="scope.row.is_true">
          <el-checkbox
            :label="scope.row.code"
            value="true"
            @change="handleAChecked(scope.row.code)"
          />
        </el-checkbox-group>
      </template>
    </el-table-column>
    <el-table-column label="单选内容" prop="content">
      <template slot-scope="scope">
        <el-input v-model="scope.row.content" type="textarea" placeholder="请输入内容" />
      </template>
    </el-table-column>
    <el-table-column align="center" label="选择图片" prop="pic" width="200">
      <el-image style="width: 100px; height: 100px" src fit="contain" />
    </el-table-column>
    <el-table-column label="操作" align="center" width="150">
      <template slot-scope="{ $index }">
        <el-button
          v-if="quest_options.length === $index + 1"
          type="danger"
          icon="el-icon-delete"
          circle
          @click="delBtn"
        />
        <el-button
          v-if="quest_options.length === $index + 1"
          type="primary"
          icon="el-icon-plus"
          circle
          @click="addBtn"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "OneChoose",
  data() {
    return {
      arr: ["A", "B"],
      quest_options: [],
      quest_answer: ""
    };
  },
  created() {
    this.quest_options.push(
      { code: this.arr[0], content: "", is_true: false, pic: "" },
      { code: this.arr[1], content: "", is_true: false, pic: "" }
    );
  },
  methods: {
    addBtn() {
      if (this.arr.length < 26) {
        this.arr.push(String.fromCharCode(this.arr.length + 65));
        this.quest_options.push({
          code: this.arr[this.arr.length - 1],
          constent: "",
          is_true: false,
          pic: ""
        });
      } else {
        this.$message.warning("选项至多26个");
      }
    },
    delBtn() {
      if (this.quest_options.length <= 2) {
        this.$message.warning("选项至少2个");
      } else {
        this.quest_options.pop();
      }
    },
    handleAChecked(code) {
      const res = this.quest_options.filter(item => item.code !== code);
      res.forEach(item => {
        item.is_true = false;
      });
      const res1 = this.quest_options.filter(item => item.code === code);
      res1.forEach(item => {
        this.quest_answer = item.code;
      });
      this.$emit("quest_options", this.quest_options, this.quest_answer);
    }
  }
};
</script>

<style lang='scss' scoped>
.el-table {
  width: 1000px;
}
</style>
